// src/pages/search/widgets/searchKey/index.tsx
import React from "react";
import styles from "@pages/search/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import SearchKeyItem from "@pages/search/widgets/searchKey/item";
import { useTypedSelector } from "@store/index";
import { searchKeySelectors } from "@slice/searchKey";
import { useTypedDispatch } from "@store/index";
import { clearKey } from "@slice/searchKey";
export default function SearchKey() {
  // 获取搜索历史关键词列表
  const searchKeys = useTypedSelector(searchKeySelectors.selectAll);
// 获取 dispatch 方法
const dispatch = useTypedDispatch();
  return (
    <ul className={styles.history}>
    <li>
      历史记录
      <GeekIcon type={"iconbtn_del"} onClick={(event) => {
            event.stopPropagation();
            dispatch(clearKey());
          }} />
    </li>
    {searchKeys.map((item) => (
      <SearchKeyItem key={item.id} searchKey={item} />
    ))}
  </ul>
  );
}